import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { t, tOpt } from '@/i18n';
import { api, isNotBuilt, isNotFound, safe } from '@/lib/api';
import { apiAnalytics } from '@/lib/api-analytics';
import { apiExplore } from '@/lib/api-explore';
import { fixed, formatValue, grouped } from '@/lib/format';
import { seoTitle } from '@/lib/seo';
import { routes } from '@/lib/site';
import type { IndicatorCard } from '@/lib/types';
import type { RegionResponse } from '@/lib/types-explore';
import { NotBuiltState } from '@/components/data/empty-state';
import { Section } from '@/components/data/section';
import { ACTION_CLS, PageHeader } from '@/components/explore/page-header';
import { GroupComparePicker } from '@/components/regions/group-compare-picker';
import { GroupHistory } from '@/components/regions/group-history';
import { MemberMap } from '@/components/regions/member-map';
import { MemberRanking } from '@/components/regions/member-ranking';
import { MembersTable } from '@/components/regions/members-table';

export const revalidate = 900;

type Params = { slug: string };

async function load(slug: string): Promise<RegionResponse | 'not-built' | null> {
  try {
    return await apiExplore.region(slug);
  } catch (e) {
    if (isNotFound(e)) return null;
    if (isNotBuilt(e)) return 'not-built';
    throw e;
  }
}

export async function generateMetadata({ params }: { params: Promise<Params> }): Promise<Metadata> {
  const { slug } = await params;
  const data = await load(slug);
  if (!data || data === 'not-built') return { title: t('region.notFound'), robots: { index: false } };
  const name = data.group.name ?? slug;
  const title = seoTitle.region(name);
  const description = t('region.description', { name, n: data.n_members });
  const canonical = routes.region(data.group.slug ?? slug);
  return { title: { absolute: `${title} | ${t('site.name')}` }, description, alternates: { canonical }, openGraph: { title: `${title} | ${t('site.name')}`, description, url: canonical, type: 'article' }, twitter: { card: 'summary_large_image', title, description } };
}

/** Extra indicators offered in the member ranking picker besides the headline ones. */
const EXTRA_RANKING = ['gdp-per-capita-ppp', 'population-growth', 'fertility-rate', 'renewable-electricity-share', 'internet-users', 'co2-per-capita', 'general-government-gross-debt-pct-gdp', 'median-age'];

export default async function RegionPage({ params }: { params: Promise<Params> }) {
  const { slug } = await params;
  const data = await load(slug);
  if (data === null) notFound();
  if (data === 'not-built') return <NotBuiltState />;

  const g = data.group;
  const name = g.name ?? slug;
  const gslug = g.slug ?? g.id;
  const kindLabel = tOpt(`regions.kindLabel.${g.kind ?? 'custom'}`, g.kind ?? '');
  const isWorld = g.id === 'world';
  const [countriesRes, extraInd, vsWorld, regions] = await Promise.all([safe(api.countries()), safe(apiExplore.indicators({ featured: true })), isWorld ? Promise.resolve(null) : safe(apiAnalytics.regionsCompare(gslug, 'world')), safe(apiExplore.regions())]);
  const shares = vsWorld?.shares[g.id] ?? vsWorld?.shares[gslug] ?? null;
  const otherDefault = gslug === 'g7' ? 'brics' : 'g7';
  const countries = countriesRes?.items ?? [];
  const memberIds = data.members.map((m) => m.id);
  const aggs = Object.values(data.aggregates);
  const options: IndicatorCard[] = [...data.headline_indicators, ...(extraInd?.items ?? []).filter((i) => EXTRA_RANKING.includes(i.slug) || i.featured)].filter((i) => i.ranking_eligible !== false);
  const bySize = [...data.members].sort((a, b) => (b.values.population?.value ?? 0) - (a.values.population?.value ?? 0));
  const compareSlugs = bySize.slice(0, 8).map((m) => m.slug ?? m.id);
  const compareAll = data.n_members <= 8;

  return (
    <>
      <PageHeader
        crumbs={[{ href: routes.regions(), label: t('regions.title') }]}
        eyebrow={kindLabel}
        title={name}
        lede={data.description}
        meta={`${t('regions.members', { n: grouped(data.n_members) })}${g.wb_code ? ` · ${g.wb_code}` : ''}`}
        actions={
          compareSlugs.length >= 2 ? (
            <Link href={routes.compare(...compareSlugs)} className={ACTION_CLS}>
              {compareAll ? t('region.compareAll') : t('region.compareFirst', { n: compareSlugs.length })}
            </Link>
          ) : null
        }
      />

      <Section id="aggregates" title={t('region.aggregates.title')} subtitle={t('region.aggregates.sub')} className="border-t-0">
        {shares ? (
          <dl className="mb-4 grid gap-x-6 min-[361px]:grid-cols-2 md:grid-cols-4">
            {(['gdp_share_pct', 'population_share_pct'] as const).map((k) => {
              const v = shares[k];
              return (
                <div key={k} className="border-t border-rule py-3">
                  <dt className="eyebrow">{k === 'gdp_share_pct' ? t('regions.compare.gdpShare') : t('regions.compare.popShare')}</dt>
                  <dd className="pnum mt-1 text-2xl font-semibold leading-none text-ink">{v != null ? `${fixed(v, 1)} %` : t('common.na')}</dd>
                  <dd className="mt-1.5 h-1.5 w-full max-w-[12rem] overflow-hidden rounded-xs bg-surface-2" aria-hidden>
                    <span className="block h-full bg-accent" style={{ width: `${Math.min(100, v ?? 0)}%` }} />
                  </dd>
                </div>
              );
            })}
          </dl>
        ) : null}
        {aggs.length === 0 ? (
          <p className="text-sm text-ink-3">{t('common.noDataLong')}</p>
        ) : (
          <dl className="grid gap-x-6 min-[361px]:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
            {aggs.map((a) => (
              <div key={a.indicator.slug} className="border-t border-rule py-3">
                <dt className="text-xs font-medium text-ink-2">
                  <Link href={routes.indicator(a.indicator.slug)} className="link-quiet -my-3 inline-flex min-h-[44px] items-center md:my-0 md:min-h-0">
                    {a.indicator.short_name ?? a.indicator.name}
                  </Link>
                  <span className="ml-1.5 rounded-xs border border-rule px-1 text-2xs uppercase tracking-wide text-ink-3">{tOpt(`regions.${a.kind}`, a.kind)}</span>
                </dt>
                <dd className="pnum mt-1 text-2xl font-semibold leading-none text-ink">{formatValue(a.value, a.indicator)}</dd>
                <dd className="tnum mt-1 text-xs text-ink-3">{t('region.aggregates.n', { n: grouped(a.n ?? 0), year: a.year ?? '' })}</dd>
              </div>
            ))}
          </dl>
        )}
      </Section>

      <div className="grid gap-x-10 lg:grid-cols-[minmax(0,3fr)_minmax(0,2fr)]">
        <Section id="ranking" title={t('region.ranking.title')} subtitle={t('region.ranking.sub')}>
          <MemberRanking groupSlug={gslug} groupName={name} initial={data.ranking} options={options} />
        </Section>
        <Section id="map" title={t('region.map.title')} subtitle={t('region.map.sub', { n: grouped(data.n_members), name })}>
          {countries.length ? <MemberMap members={memberIds} countries={countries} name={name} /> : <p className="text-sm text-ink-3">{t('common.noDataLong')}</p>}
        </Section>
      </div>

      {vsWorld && Object.keys(vsWorld.history).length ? (
        <Section id="history" title={t('region.history.title')} subtitle={t('region.history.sub', { name })}>
          <GroupHistory data={vsWorld} ids={[g.id]} names={{ [g.id]: name }} />
        </Section>
      ) : null}

      <Section id="compare-group" title={t('regions.compare.withOther')} subtitle={t('regions.compare.withOtherSub')} actions={<Link href={routes.regionCompare(gslug, otherDefault)} className="text-accent hover:underline">{t('regions.compare.open')} →</Link>}>
        <GroupComparePicker groups={regions?.items ?? []} a={gslug} b={otherDefault} fixedA />
      </Section>

      <Section id="members" title={t('region.members.title')} subtitle={t('region.members.sub', { n: grouped(data.n_members) })}>
        {data.members.length ? <MembersTable members={data.members} indicators={data.headline_indicators} /> : <p className="text-sm text-ink-3">{t('common.noDataLong')}</p>}
      </Section>
    </>
  );
}